{extend name="common/common" /}

{block name="style"}

{/block}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-picture-o"></i></span>
		轮播图列表
		<el-button class="header-btn" type="primary" size="small"
			icon="el-icon-plus" plain @click="addRow"> 添加</el-button>
	</div>
	<el-table :data="tableData" stripe="true">
		<el-table-column align="center" prop="id" label="ID" width="50"></el-table-column>
		<el-table-column align="center" prop="remark" label="备注"></el-table-column>
		<el-table-column align="center" prop="url" label="图片地址">
			<template slot-scope="scope">
				<el-button size="text" type="success" @click="upImg(scope.row)">地址：{{ scope.row.url }}</el-button>
			</template>
		</el-table-column>
		<el-table-column align="center" prop="operate" label="操作">
			<template slot-scope="scope">
				<el-button
					@click="editRow(scope.row)" circle
					size="small" plain type="success"
					icon="el-icon-edit">
				</el-button>
				<el-button
					@click="delRow(scope.row)" circle
					size="small" plain 	type="danger"
					icon="el-icon-delete">
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="table-page">
		<el-pagination
			@size-change="pageSizeChange"
			@current-change="curPageChange"
			:current-page="pageNumber"
			:page-sizes="[10, 20, 50, 75]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableTotal">
		</el-pagination>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function(){
		return {
			loading:true,
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0
		}
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		getTable(){
			this.loading=true;
			$.post('{:url("Appmgr/swipe")}',{
				'pageSize':this.pageSize,
				'pageNumber':this.pageNumber,
				'searchText':this.searchText
			},function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({message: res.msg, type: 'success'});
					main.tableData = res.data.rows;
					main.tableTotal = res.data.total;
				}else{
					main.$notify.error({title: '失败',message: res.msg});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		addRow() {
			this.$prompt('请输入备注', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				$.post('{:url("Appmgr/swipeAdd")}',{remark:value},function(res) {
					if(res.code == 1){
						main.$message({message: res.msg, type: 'success'});
						main.getTable();
					}else{
						main.$notify.error({title: '失败',message: res.msg});
					}
				})
			}).catch(() => { });
		},
		editRow(row){
			this.$prompt('请输入备注', '提示', {
				inputValue:row.remark,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				$.post('{:url("Appmgr/swipeEdit")}',{id:row.id,remark:value},function(res) {
					if(res.code == 1){
						main.$message({message: res.msg, type: 'success'});
						main.getTable();
					}else{
						main.$notify.error({title: '失败',message: res.msg});
					}
				})
			}).catch(() => { });
		},
		delRow(row){
			this.$confirm('此操作将永久删除该数据,是否继续?','提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then((res) => {
				$.post("{:url('Appmgr/swipeDel')}",{id:row.id,url:row.url},function(res){
					if(res.code == 1){
						main.$alert(res.msg,{
							confirmButtonText: '确定',
							callback: action => { main.getTable() }
						});
					}else{
						main.$notify.error({title: '失败',message: res.msg});
					}
				})
			}).catch((res) => {
				this.$notify.info({title:"消息",message: "已取消删除"})
			});
		},
		upImg(row) {
			uploadAlert.is_show = true;
			uploadAlert.limit = 1;
			uploadAlert.data_row_id = row.id;
			uploadAlert.upData = {
				'targetpath':'appSwipe/'+new Date().getTime()
			}
		},
		upSuccess(res,file) {
			if(res.code == 1){
				$.post('{:url("Appmgr/swipeEdit")}',{
					id:uploadAlert.data_row_id,url:res.data.path
				},function(res) {
					if(res.code == 1){
						main.getTable();
					}else{
						main.$notify.error({title: '失败',message: res.msg});
					}
				})
			}
		}
	}
})
</script>
{/block}
